<div class="flex flex-row items-center justify-end" id="menu">
    <th:block th:each="menuName : ${theme.config.navbar.menus}">
        <th:block th:with="menu = ${menuFinder.getByName(menuName)}">
            <ul class="menu menu-horizontal font-bold flex flex-row justify-end items-center flex-nowrap"
                th:classappend=" ${theme.config.navbar.menu_size}"
                th:with="menuItems = ${menu.menuItems}">
                <li th:each="menuItem : ${menuItems}">
                    <th:block th:if="${#lists.isEmpty(menuItem.children)}">
                        <!-- 数组为空时的内容 -->
                        <a
                                th:href="@{${menuItem.status.href}}"
                                th:text="${menuItem.status.displayName}"
                                th:target="${menuItem.spec.target?.value}"
                        >
                        </a>
                    </th:block>
                    <th:block th:if="${!#lists.isEmpty(menuItem.children)}">
                        <details class="dropdown">
                            <summary role="button" tabindex="0" th:text="${menuItem.status.displayName}"></summary>
                            <ul class="menu dropdown-content rounded-box z-[1] p-2 shadow bg-base-100 text-base-content">
                                <li class="flex flex-row flex-nowrap" th:each="childItem : ${menuItem.children}">
                                    <a
                                            th:href="@{${childItem.status.href}}"
                                            th:text="${childItem.status.displayName}"
                                            th:target="${childItem.spec.target?.value}"
                                    >
                                    </a>
                                </li>
                            </ul>
                        </details>
                    </th:block>
                </li>
            </ul>
        </th:block>
    </th:block>
</div>

<style>
    @media (max-width: 767px) {
        /* 隐藏 id 为 cover_blank 的所有元素 */

        #menu {
            display: none; /* 隐藏 cover_blank 元素 */
        }
    }
</style>